<template>
  <view class="test-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">热门服务组件测试</text>
      <text class="page-subtitle">Popular Services Component Test</text>
    </view>

    <!-- 热门服务组件 -->
    <PopularServices @serviceClick="handleServiceClick" />

    <!-- 测试信息面板 -->
    <view class="test-info-panel">
      <view class="panel-header">
        <text class="panel-title">测试信息</text>
      </view>
      
      <view class="click-history">
        <text class="history-title">点击历史：</text>
        <view class="history-list">
          <view 
            v-for="(item, index) in clickHistory" 
            :key="index" 
            class="history-item"
          >
            <text class="history-time">{{ item.time }}</text>
            <text class="history-service">{{ item.service }}</text>
            <text class="history-type">{{ item.type }}</text>
          </view>
          <view v-if="clickHistory.length === 0" class="no-history">
            <text class="no-history-text">暂无点击记录</text>
          </view>
        </view>
      </view>

      <!-- 功能测试按钮 -->
      <view class="test-buttons">
        <button class="test-btn primary" @click="clearHistory">
          清空历史
        </button>
        <button class="test-btn secondary" @click="simulateClick">
          模拟点击
        </button>
        <button class="test-btn info" @click="showComponentInfo">
          组件信息
        </button>
      </view>
    </view>

    <!-- 组件信息弹窗 -->
    <view v-if="showInfo" class="info-modal" @click="closeInfo">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">组件信息</text>
          <text class="modal-close" @click="closeInfo">×</text>
        </view>
        <view class="modal-body">
          <view class="info-item">
            <text class="info-label">组件名称：</text>
            <text class="info-value">PopularServices</text>
          </view>
          <view class="info-item">
            <text class="info-label">服务类型：</text>
            <text class="info-value">助医中心、助行中心、个案管理中心、母婴中心、老年中心</text>
          </view>
          <view class="info-item">
            <text class="info-label">设计尺寸：</text>
            <text class="info-value">基于750rpx设计稿</text>
          </view>
          <view class="info-item">
            <text class="info-label">响应式：</text>
            <text class="info-value">支持小屏设备适配</text>
          </view>
          <view class="info-item">
            <text class="info-label">交互效果：</text>
            <text class="info-value">点击缩放、阴影变化</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/**
 * 热门服务组件测试页面
 * 用于测试和展示PopularServices组件的功能
 * @author AI Assistant
 * @description 提供组件交互测试、点击历史记录、组件信息展示等功能
 */

import { ref } from 'vue'
import PopularServices from '@/components/PopularServices.vue'

// 响应式数据
const clickHistory = ref<Array<{
  time: string
  service: string
  type: string
}>>([])

const showInfo = ref(false)

/**
 * 处理服务卡片点击事件
 * @param payload - 点击事件数据
 */
const handleServiceClick = (payload: { type: string; name: string }) => {
  const now = new Date()
  const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
  
  // 添加到点击历史
  clickHistory.value.unshift({
    time: timeStr,
    service: payload.name,
    type: payload.type
  })
  
  // 限制历史记录数量
  if (clickHistory.value.length > 10) {
    clickHistory.value = clickHistory.value.slice(0, 10)
  }
  
  // 显示点击反馈
  uni.showToast({
    title: `点击了${payload.name}`,
    icon: 'success',
    duration: 1500
  })
  
  console.log('服务点击:', payload)
}

/**
 * 清空点击历史
 */
const clearHistory = () => {
  clickHistory.value = []
  uni.showToast({
    title: '历史已清空',
    icon: 'success'
  })
}

/**
 * 模拟点击事件
 */
const simulateClick = () => {
  const services = [
    { type: 'medical', name: '助医中心' },
    { type: 'mobility', name: '助行中心' },
    { type: 'case', name: '个案管理中心' },
    { type: 'maternal', name: '母婴中心' },
    { type: 'elderly', name: '老年中心' }
  ]
  
  const randomService = services[Math.floor(Math.random() * services.length)]
  handleServiceClick(randomService)
}

/**
 * 显示组件信息
 */
const showComponentInfo = () => {
  showInfo.value = true
}

/**
 * 关闭组件信息弹窗
 */
const closeInfo = () => {
  showInfo.value = false
}
</script>

<style lang="scss" scoped>
.test-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding-bottom: 40rpx;
}

.page-header {
  padding: 60rpx 32rpx 40rpx;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-radius: 0 0 32rpx 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    display: block;
    font-size: 48rpx;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 16rpx;
  }
  
  .page-subtitle {
    font-size: 28rpx;
    color: #7f8c8d;
    font-weight: 400;
  }
}

.test-info-panel {
  margin: 32rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20rpx);
}

.panel-header {
  margin-bottom: 32rpx;
  
  .panel-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #2c3e50;
  }
}

.click-history {
  margin-bottom: 40rpx;
  
  .history-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #34495e;
    margin-bottom: 20rpx;
    display: block;
  }
}

.history-list {
  max-height: 400rpx;
  overflow-y: auto;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 16rpx 20rpx;
  margin-bottom: 12rpx;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 16rpx;
  border-left: 6rpx solid #3498db;
  
  .history-time {
    font-size: 24rpx;
    color: #7f8c8d;
    margin-right: 20rpx;
    min-width: 120rpx;
  }
  
  .history-service {
    font-size: 28rpx;
    color: #2c3e50;
    font-weight: 500;
    flex: 1;
    margin-right: 20rpx;
  }
  
  .history-type {
    font-size: 24rpx;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    padding: 4rpx 12rpx;
    border-radius: 12rpx;
  }
}

.no-history {
  text-align: center;
  padding: 60rpx 20rpx;
  
  .no-history-text {
    font-size: 28rpx;
    color: #bdc3c7;
  }
}

.test-buttons {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.test-btn {
  flex: 1;
  min-width: 160rpx;
  height: 80rpx;
  border-radius: 44rpx;
  border: none;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  
  &.primary {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: #fff;
    
    &:active {
      background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
      transform: scale(0.98);
    }
  }
  
  &.secondary {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: #fff;
    
    &:active {
      background: linear-gradient(135deg, #7f8c8d 0%, #6c7b7d 100%);
      transform: scale(0.98);
    }
  }
  
  &.info {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: #fff;
    
    &:active {
      background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
      transform: scale(0.98);
    }
  }
}

// 信息弹窗样式
.info-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(10rpx);
}

.modal-content {
  width: 80%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: #fff;
  
  .modal-title {
    font-size: 36rpx;
    font-weight: 600;
  }
  
  .modal-close {
    font-size: 48rpx;
    font-weight: 300;
    cursor: pointer;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    
    &:active {
      background: rgba(255, 255, 255, 0.3);
    }
  }
}

.modal-body {
  padding: 32rpx;
}

.info-item {
  display: flex;
  margin-bottom: 24rpx;
  
  .info-label {
    font-size: 28rpx;
    color: #7f8c8d;
    min-width: 160rpx;
    font-weight: 500;
  }
  
  .info-value {
    font-size: 28rpx;
    color: #2c3e50;
    flex: 1;
    line-height: 1.4;
  }
}

// 响应式适配
@media (max-width: 600rpx) {
  .test-info-panel {
    margin: 24rpx;
    padding: 24rpx;
  }
  
  .page-header {
    padding: 40rpx 24rpx 32rpx;
    
    .page-title {
      font-size: 40rpx;
    }
    
    .page-subtitle {
      font-size: 24rpx;
    }
  }
  
  .test-buttons {
    flex-direction: column;
  }
  
  .test-btn {
    min-width: auto;
  }
}
</style>
